<template>
  <div>
    <!-- 核心操作：将数组数据 转 html代码 -->
    <ul>
      <!-- 作者借鉴了JS的 for..in 遍历语法，融入到HTML -->
      <!-- JS中：for(const x in names){} -->
      <!-- v-for:自动遍历数组，生成元素 -->
      <li v-for="x in name">{{x}}</li>
    </ul>

    <!-- for .. of 语法同效果，无差异 -->
    <!-- 在vue中 of 和 in 没有区别 ，选你喜欢的 -->
    <button v-for="kun of name">{{kun}}</button>

    <!-- 下标语法 -->
    <hr>
    <!-- (值，序号) in/of 数组 -->
    <!-- 注意：in/of 左右的空格是必须的 -->
    <button v-for="(x,i) in name">{{i}} - {{x}}</button>

    <!-- 支持遍历数字 -->
    <hr>
    <button v-for="n in 10">{{n}}</button>
    <hr>
    <button v-for="n in 10">{{n * 5}}</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: ['蔡徐坤','唱','跳','rap','打篮球'],
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>